<template>
    <div class="tabbarItem" @click="btnClick">
       <div v-if="!isActive"><slot  name="item-img"></slot></div> 
       <div v-else><slot  name="item-img-active"></slot></div> 
       <div :style="styleColor"><slot  name="item-text"></slot></div> 
    </div>    
</template>

<script>
export default {
    props:{
        path:String,
        activeColor:{
            type:String,
            default(){
                return "red"
            }
        }
    },
    data(){
        return {
     
        }
    },
    computed:{
        isActive(){
            return this.$route.path.indexOf(this.path) !==-1;
        },
        styleColor(){
            return this.isActive?{color:this.activeColor}:{}
        }
    },  
    methods:{
        btnClick(){
            this.$router.replace(this.path)             
        }
    }
}
</script>

<style>
.tabbarItem{
  flex:1;
  text-align: center;
  font-size: 13px;

}
.tabbarItem img{
  height: 24px;
  width: 24px;
  vertical-align: middle;
  margin-top: 3px;

}
/* .active{
  color:red;  
} */
</style>